import React, { FC, useEffect, useState } from 'react'
import { usePage } from '@hs-admin/utils'
import { Button, Space } from 'antd'
import { HsAdminSortTable } from '@hs-admin/base-components'
import { reqMapList } from '@/api/assetMaintain/industry/atlas'

const TablePage: FC = () => {
  const [data, setData] = useState<any[]>([])
  const columns = [
    {
      title: '图谱名称',
      dataIndex: 'name'
    },
    {
      title: '图谱描述',
      dataIndex: 'description',
      width: 200,
      ellipsis: true
    },
    {
      title: '所属领域',
      dataIndex: 'domain.name'
    },
    {
      title: '最新维护时间',
      dataIndex: 'updated_at',
      type: 'datetime'
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: () => (
        <Space>
          <Button type="link">编辑</Button>
          <Button type="link">删除</Button>
        </Space>
      )
    }
  ]

  const doRequest = () => {
    return reqMapList({
      page: pagination.current,
      page_size: pagination.pageSize
    }).then((res) => {
      setData(res.items)
      setTotal(res.total)
      return res
    })
  }
  const { pagination, setTotal, resetPage } = usePage()

  const onDragEnd = (list: React.SetStateAction<any[]>) => {
    setData(list)
  }

  useEffect(() => {
    doRequest()
  }, [])

  return (
    <>
      <Button type="primary" onClick={resetPage}>
        重置
      </Button>
      <br />
      <HsAdminSortTable columns={columns} rowKey="id" dataSource={data} onUpdateDragEnd={onDragEnd} />
    </>
  )
}

export default TablePage
